<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="admin/module/_header"></div>
<div class="wrapper">
    <div th:replace="admin/module/_sidebar"></div>

    <div class="content-wrapper">
        <style>
            .form-horizontal .control-label {
                text-align: left;
            }
        </style>
        <section class="content-header">
            <h1>
                个人信息
                <small></small>
            </h1>
            <ol class="breadcrumb">
                <li>
                    <a data-pjax="true" href="/admin">
                        <i class="fa fa-dashboard"></i> 首页</a>
                </li>
                <li class="active">个人信息</li>
            </ol>
        </section>
        <!-- tab选项卡 -->
        <section class="content container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#general"
                                   data-toggle="tab">基本信息</a>
                            </li>
                            <li>
                                <a href="#pass"
                                   data-toggle="tab">修改密码</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="general">
                                <form method="post" class="form-horizontal" id="profileForm">
                                    <input type="hidden" id="userPass" name="userPass"
                                           th:value="${user.userPass}">
                                    <div class="box-body">
                                        <div class="form-group">
                                            <label for="userAvatar"
                                                   class="col-lg-2 col-sm-4 control-label">照片</label>
                                            <div class="col-lg-4 col-sm-8">
                                                <div class="col-md-6">
                                                    <div class="input-group">
                                                        <input type="hidden" class="form-control"
                                                               id="userAvatar"
                                                               name="userAvatar" th:value="${user.userAvatar}">
                                                        <span class="input-group-btn">
                                                    <input type="file" id="file" accept=".png, .jpg, .jpeg" style="display: none">
                                                        <button onclick="$('#file').click();" class="btn btn-default "
                                                                type="button">选择图片</button>
                                                    </span>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <img th:src="${user.userAvatar}" id="userAvatarImg" style="width: 100px;" alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="userName"
                                                   class="col-lg-2 col-sm-4 control-label">账号
                                                <span data-toggle="tooltip" data-placement="top"
                                                      title="用户登录的账号"
                                                      style="cursor: pointer">
                                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                </span>
                                            </label>
                                            <div class="col-lg-4 col-sm-8">
                                                <input type="text" class="form-control" id="userName"
                                                       th:value="${user.userName}" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="userDisplayName"
                                                   class="col-lg-2 col-sm-4 control-label">姓名</label>
                                            <div class="col-lg-4 col-sm-8">
                                                <input type="text" class="form-control" id="userDisplayName"
                                                       name="userDisplayName"
                                                       th:value="${user.userDisplayName}">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="phone"
                                                   class="col-lg-2 col-sm-4 control-label">电话</label>
                                            <div class="col-lg-4 col-sm-8">
                                                <input type="text" class="form-control" id="phone"
                                                       name="phone"
                                                       th:value="${user.phone}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="email"
                                                   class="col-lg-2 col-sm-4 control-label">电子邮箱</label>
                                            <div class="col-lg-4 col-sm-8">
                                                <input type="email" class="form-control" id="email"
                                                       name="email"
                                                       th:value="${user.email}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-footer">
                                        <button type="button" class="btn btn-primary btn-sm "
                                                onclick="saveUser('profileForm')">保存
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane" id="pass">
                                <form method="post" class="form-horizontal" id="passForm">
                                    <div class="box-body">
                                        <div class="form-group">
                                            <label for="beforePass"
                                                   class="col-sm-2 control-label">旧密码</label>
                                            <div class="col-sm-4">
                                                <input type="password" class="form-control" id="beforePass"
                                                       name="beforePass">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="newPass"
                                                   class="col-sm-2 control-label">新密码</label>
                                            <div class="col-sm-4">
                                                <input type="password" class="form-control" id="newPass"
                                                       name="newPass">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="reNewPass"
                                                   class="col-sm-2 control-label">确认密码</label>
                                            <div class="col-sm-4">
                                                <input type="password" class="form-control" id="reNewPass"
                                                       name="reNewPass">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-footer">
                                        <button type="button" class="btn btn-primary btn-sm "
                                                onclick="changPass()">修改
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <script>
            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            });


            function saveUser(option) {
                var param = $('#' + option).serialize();
                $.ajax({
                    type: 'post',
                    url: '/admin/user/profile/save',
                    data: param,
                    success: function (data) {
                        if (data.code == 1) {
                            showMsgAndReload(data.msg, "success", 1000);
                        } else {
                            showMsg(data.msg, "error", 2000);
                        }
                    }
                });
            }

            function changPass() {
                var beforePass = $('#beforePass').val();
                var newPass = $('#newPass').val();
                var reNewPass = $('#reNewPass').val();
                if (beforePass == "" || newPass == "" || reNewPass == "") {
                    showMsg("请输入完整信息", "info", 1000);
                    return;
                }
                if (newPass != reNewPass) {
                    showMsg("两次密码不一致", "error", 2000);
                    return;
                }
                var param = $('#passForm').serialize();
                $.ajax({
                    type: 'post',
                    url: '/admin/user/changePass',
                    data: param,
                    success: function (data) {
                        if (data.code == 1) {
                            $.toast({
                                text: data.msg,
                                heading: 'Tips',
                                icon: 'success',
                                showHideTransition: 'fade',
                                allowToastClose: true,
                                hideAfter: 1000,
                                stack: 1,
                                position: 'top-center',
                                textAlign: 'left',
                                loader: true,
                                loaderBg: '#ffffff',
                                afterHidden: function () {
                                    window.location.reload();
                                }
                            });
                        } else {
                            showMsg(data.msg, "error", 2000);
                        }
                    }
                });
            }

            function removeIt(id) {
                layer.confirm('你确定是否删除', function (index) {
                    $.ajax({
                        type: "POST",
                        url: '/admin/user/deleteBind',
                        async: false,
                        data: {
                            'id': id
                        },
                        success: function (data) {
                            console.log(data);
                            if (data.code == 0) {
                                showMsg(data.msg, "error", 2000);
                            } else {
                                $('#bind-' + id).remove();
                                showMsg(data.msg, "success", 1000);
                            }

                        }
                    });
                    layer.close(index);
                });
            }


            $('body').on('change', '#file', function () {
                var formData = new FormData();
                var files = $($(this))[0].files[0];
                formData.append("file", files);
                $.ajax({
                    url: '/admin/file/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                        $('#userAvatar').val(res.link);
                        $('#userAvatarImg').attr('src', res.link);
                    }
                    , error: function (res) {
                    }
                });
            })
        </script>
    </div>
</div>
<div th:replace="admin/module/_footer"></div>

